<template>
    <div id="MovieTab">
        <ul>
        <router-link class="font-color" tag="li" to="/movie/city">
            北京<i class="fa fa-caret-down"></i>
        </router-link>
          <router-link class="font-color" tag="li" to="/movie/now">
            正在热映
        </router-link>
        <router-link class="font-color" tag="li" to="/movie/coming">
            即将上映
        </router-link>
        <router-link tag="li" to="/movie/search">
            <i class="fa fa-search"></i>
        </router-link>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>
li{
    display: inline-block;
    width: 25%;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
}
.font-color{
    color: #666;
}
.fa-caret-down{
    margin-top:5px;
}
.fa-search{
    font-size: 25px;
}
.router-link-active{
    color: #E54847;
    border-bottom: 2px solid #E54847;
}
</style>